<template>
  <div class="container">
    <el-row>
      <el-col class="t-l-r">
        <label for="">语言</label>
        <el-select v-model="listQuery.lang" class="w-140" size="small">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
        <el-date-picker
          v-model="datePicker1"
          class="w-240"
          size="small"
          type="daterange"
          align="right"
          value-format="yyyy-MM-dd"/>
        <el-button size="small" type="primary" @click="search">搜索</el-button>
      </el-col>
    </el-row>
    <el-row class="p-t-15">
      <el-col>
        <el-table v-loading="listLoading" :data="tableData" border highlight-current-row>
          <el-table-column prop="date" label="资讯发布时间"/>
          <el-table-column label="语言">
            <template slot-scope="scope">
              <span>{{ langMap[scope.row.lang] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="releaseCount" label="发布量"/>
          <el-table-column prop="curDayRecommendCount" label="【当天发布的资讯】当天推荐量"/>
          <el-table-column prop="threeDayRecommendCount" label="【当天发布的资讯】近三天推荐量"/>
          <el-table-column prop="curDayReadCount" label="【当天发布的资讯】当天阅读量"/>
          <el-table-column prop="threeDayReadCount" label="【当天发布的资讯】近三天阅读量"/>
          <el-table-column label="当天推荐比">
            <template slot-scope="scope">
              <span>{{ scope.row.curDayRecommendRate | rateFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column label="近三天推荐比">
            <template slot-scope="scope">
              <span>{{ scope.row.threeDayRecommendRate | rateFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column label="当天阅读比">
            <template slot-scope="scope">
              <span>{{ scope.row.curDayReadRate | rateFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column label="近三天阅读比">
            <template slot-scope="scope">
              <span>{{ scope.row.threeDayReadRate | rateFilter }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="block fr p-t-15 p-b-15">
      <el-pagination
        :current-page="listQuery.pageSize"
        :page-sizes="[10, 15, 20]"
        :page-size="15"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import {
  newsAnalysisApi
} from '@/api/recommended-analysis.js';
export default {
  filters: {
    rateFilter(val) {
      if (!val) return 0;
      return (val * 10000 / 100).toFixed(2) + '%';
    }
  },
  data() {
    return {
      datePicker1: null,
      options1: [{
        value: null,
        label: '全部'
      }, {
        value: 'zh-Hans',
        label: '中文'
      }, {
        value: 'km-KH',
        label: '柬文'
      }],
      listLoading: false,
      tableData: [],
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        lang: null,
        beginTime: null,
        endTime: null,
        index: 1,
        size: 15
      },
      langMap: {
        'all': '全部',
        'zh-Hans': '中文',
        'km-KH': '柬文'
      }

    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    search() {
      this.listQuery.beginTime = (this.datePicker1 && this.datePicker1[0]) || null;
      this.listQuery.endTime = (this.datePicker1 && this.datePicker1[1]) || null;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      newsAnalysisApi(this.listQuery).then(res => {
        if (res.code == 200) {
          this.listLoading = false;
          this.tableData = res.data;
          this.total = Number(res.count) || 0;
        } else {
          this.listLoading = false;
        }
      }).catch(e => {
        this.listLoading = false;
      });
    },

    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },

    handleCurrentChange(val) {
      this.listQuery.index = val;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
    padding: 15px;
    .t-l-r {
        text-align: right;
    }
    .w-140 {
        width: 140px;
    }
    .w-240 {
        width: 240px;
    }
}
</style>
